<template>
	<Row>
		<ICol span="24">
			<IMenu :active-name="form.replyType" mode="horizontal" @on-select="choiseReplyType" >
				<IMenuItem name="mpnews"><Icon type="md-filing"></Icon>图文</IMenuItem>
				<IMenuItem name="text"><Icon type="md-paper"></Icon>文本</IMenuItem>
				<IMenuItem name="image"><Icon type="md-image"></Icon>图片</IMenuItem>
			</IMenu>
		</ICol>
		<ICol span="24">
			<div style="width: 50%;">
    			<CommonMpnews :news="mpnews" style="margin-top: 20px;" ></CommonMpnews>
    			<img :src="image" style="width: 100%;">
    		</div>
    		<CommonText v-show="texts.length>0" :texts="texts"></CommonText>
		</ICol>
		<ListMpnews ref="mpnews" :callback="choiseMpnews"></ListMpnews>
		<ListText ref="text" :callback="choiseText"></ListText>
		<ListImage ref="image" :callback="choiseImage"></ListImage>
	</Row>
</template>
<script>
	import {Row,Col,Menu,Icon} from 'iview';

	import ListMpnews from 'admin/components/wechat/function/reply/reply-item/modal-list-mpnews';
    import ListText from 'admin/components/wechat/function/reply/reply-item/modal-list-text';
    import ListImage from 'admin/components/wechat/function/reply/reply-item/modal-list-image';
    import CommonMpnews from 'admin/components/wechat/function/reply/reply-item/mpnews';
    import CommonText from 'admin/components/wechat/function/reply/reply-item/text';

	export default {
		props:{
			callback:{
				type:Function,
				required : true,
			}
		},
		components:{
			Row,
            'ICol':Col,
			'IMenu':Menu,
			'IMenuItem':Menu.Item,
			ListMpnews,
			ListText,
			ListImage,
			CommonMpnews,
			CommonText,
			Icon,
		},
		data(){
			return {
				form :{
					replyType : '',
					wechat_text_id : 0,
					wechat_image_id : 0,
					wechat_mpnews_id : 0,
                },
				//选择的图文消息
                mpnews : [],
                //选择的文本
                texts : [],
                //选择的图片
                image : '',
			}
		},
		methods:{
			setChoise(reply){
				switch(reply.replyType){
    				case 'mpnews' :
    					this.choiseMpnews(reply.wechat_mpnews_id);
    				break;
    				case 'image' :
    					this.choiseImage(reply.wechat_image_id);
    				break;
    				case 'text' :
    					this.choiseText(reply.wechat_text_id);
    				break;
    			}
			},
			//重置选择
        	resetChoise(){
        		this.mpnews = [];
        		this.texts = [];
        		this.image = '';
        		this.form.wechat_text_id = 0;
        		this.form.wechat_image_id = 0;
        		this.form.wechat_mpnews_id = 0;
        	},
			choiseMpnews(id){
        		this.Axios.Wechat.Manager.Material.Mpnews.Get(id)
                .then(res =>{
                    if(!res) return false;
                    this.resetChoise();
                    this.mpnews = res.data;
                    this.form.replyType = 'mpnews';
                    this.form.wechat_mpnews_id = id;
                    this.callback(this.form);
                })
        	},	
        	//选择文字
        	choiseText(id){
        		this.Axios.Wechat.Manager.Material.Text.Get(id)
                .then(res =>{
                    if(!res) return false;
                    this.resetChoise();
                    this.texts.push(res.data);
                    this.form.replyType = 'text';
                    this.form.wechat_text_id = res.data.id;
                    this.callback(this.form);
                })
        	},
        	//选择的图片
        	choiseImage(id){
        		this.Axios.Wechat.Manager.Material.Image.Get(id)
                .then(res =>{
                    if(!res) return false;
                    this.resetChoise();
                    this.image = res.data.url;
                    this.form.replyType = 'image';
                    this.form.wechat_image_id = res.data.id;
                    this.callback(this.form);
                })
        	},
        	//选择回复类型
        	choiseReplyType(name){
        		this.$refs[name].modal = true;
        	}
		}

	}
</script>